<template>
  <div class="">
    <messageBoard></messageBoard>
    <modalAgent></modalAgent>
    <div class="pc_huoke_page">
      <!--banner-->
      <div class="banner_huoke pc_huoke_baner_bg">
        <button type="button" class="banner_open_btn" data-toggle="modal" data-target="#myModal"></button>
        <img src="http://image.xuemei99.com/banner_pic_huokebao_new.jpg" alt="">
      </div>
      <!--微商城nav-->
      <div class="bg_fff">
        <ul class="wei_shop_ul width_1108 clear">
          <li class="item_shop text-center">
            <div class="shop_box_bg item_shop_bg1"></div>
            <p>微商城</p>
          </li>
          <li class="item_shop text-center">
            <div class="shop_box_bg item_shop_bg2"></div>
            <p>营销插件</p>
          </li>
          <li class="item_shop text-center">
            <div class="shop_box_bg item_shop_bg3">
            </div>
            <p>管理系统</p>
          </li>
          <li class="item_shop text-center">
            <div class="shop_box_bg item_shop_bg4"></div>
            <p>智能运营</p>
          </li>
          <li class="item_shop text-center">
            <div class="shop_box_bg item_shop_bg5"></div>
            <p>异业联盟</p>
          </li>
        </ul>
      </div>

      <!--微商城 wei-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">微商城</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">专业为您的门店在线上打造的空中商城。</p>
          <ul class="wei_img_ul width_700 text-center clear">
            <li class="">
              <div class="wei_img_box wei_img_box1"></div>
              <p class="col_666 font_14 marfin_top_10">小程序预约</p>
            </li>
            <li class="margin_left_20">
              <div class="wei_img_box wei_img_box2"></div>
              <p class="col_666 font_14 marfin_top_10">小程序预约</p>
            </li>
            <li class="margin_left_20">
              <div class="wei_img_box wei_img_box3"></div>
              <p class="col_666 font_14 marfin_top_10">小程序预约</p>
            </li>
          </ul>
        </div>
      </div>

      <!--营销插件-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">营销插件</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">定期推出新的营销插件帮助企业轻松获客，自主获客。</p>
          <ul class="components_ul width_700 text-center clear">
            <li class="components_left_img"></li>
            <li class="components_right_box text-center row">
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/icon_xianshimiaosha.png" alt="">
                <p class="">限时秒杀</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/icon_jianjia.png" alt="">
                <p class="">减价</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/icon_tuangou.png" alt="">
                <p class="">团购</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/icon_kanjia.png" alt="">
                <p class="">多商品砍价</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/icon_zhulimiaosha.png" alt="">
                <p class="">助力秒杀</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/more_pic_huokebao.png" alt="">
                <p class="">更多功能开发中</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!--管理系统 manage-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">管理系统</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">订单管理，顾客管理，项目管理，活动管理，员工管理，业绩管理，专业的APP后台管理</p>
          <ul class="components_ul width_700 text-center clear">
            <li class="manage_left_box text-center row">
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/order_icon_huokebao.png" alt="">
                <p class="">订单管理</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/customer_icon_huokebao.png" alt="">
                <p class="">顾客管理</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/project_icon_huokebao.png" alt="">
                <p class="">项目管理</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/active_icon_huokebao.png" alt="">
                <p class="">活动管理</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/staff_icon_huokebao.png" alt="">
                <p class="">员工管理</p>
              </div>
              <div class="col-md-4 right_img_box">
                <img src="http://image.xuemei99.com/achievement_icon_huokebao.png" alt="">
                <p class="">业绩管理</p>
              </div>
            </li>
            <li class="manage_right_box"></li>
          </ul>
        </div>
      </div>

      <!--智能运营 operate-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">智能运营</p>
          <p class="col_666 width_700 margin_0_auto font_18 text-center margin_top_20">活动数据查询及跟进，活动前、活动中、活动后执行流程智能提醒智能推送， 确保活动结果及跟进，帮助企业随时了解活动跟进活动</p>
          <div class="operate_box margin_0_auto text-center clear"></div>
        </div>
      </div>

      <!--生态系统 ecology-->
      <div class="item_wei_shop item_ecology_box col_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">生态系统</p>
          <div class="ecology_box width_700 margin_0_auto row">
            <div class="ecology_left col-md-6">
              <img src="http://image.xuemei99.com/shengtai_pic_huokebao.png" alt="">
            </div>
            <div class="ecology_right text-left col-md-6">
              <p class="font_18">客连客小程序</p>
              <p class="margin_top_20 font_14">异业联盟生态平台，让联盟门店顾客参与本店营销活动，整合联盟门店优惠方案，让顾客获得更多优惠，联盟商家免费获得客连客小程序推广系统，门店智能联盟，智能互推，智能获客</p>
              <button type="button" class="ecology_detail_btn bg_2577EF col_fff font_14" @click="to_kelianke">了解详情</button>
            </div>
          </div>
        </div>
      </div>

      <!--版本介绍-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">版本介绍</p>
          <ul class="wei_img_ul edition_ul clear">
            <li class="">
              <img src="http://image.xuemei99.com/xiaochengxu_pic_huokebao.png" alt="">
            </li>
            <li class="">
              <img src="http://image.xuemei99.com/liansuo_pic_huokebao.png" alt="">
            </li>
            <li class="">
              <img src="http://image.xuemei99.com/jiameng_pic_huokebao.png" alt="">
            </li>
          </ul>
        </div>
      </div>

      <!--体验下载 download-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">体验与下载</p>
          <ul class="wei_img_ul download_ul text-center clear">
            <li class="">
              <img src="http://image.xuemei99.com/code1_pic_huokebao.png" alt="">
              <p class="col_333 font_14">扫码体验获客宝模板小程序商城</p>
            </li>
            <li class="margin_left_20">
              <img src="http://image.xuemei99.com/code2_pic_huokebao.png" alt="">
              <p class="col_333 font_14">扫码下载获客宝后台管理APP</p>
            </li>
          </ul>
        </div>
      </div>

      <!--获客加盟流程 flow-->
      <div class="join_flow">
        <div class="width_1108 col_fff margin_0_auto">
          <p class="font_28">获客宝开通流程</p>
          <div class="flow_box margin_top_60 clear">
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/inquiry_icon_huokebao.png" alt="">
              <p>查询加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/contact_icon_huokebao.png" alt="">
              <p>联系加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/pay_icon_huokebao.png" alt="">
              <p>付款签署协议</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/use_icon_huokebao.png" alt="">
              <p>开通交付使用</p>
            </div>
          </div>
          <div class="text-center margin_top_60"><button type="button" class="join_daili_btn bg_2577EF" data-toggle="modal" data-target="#myModal">立即开通</button></div>
        </div>
      </div>
    </div>

    <!--mobile-->
    <div class="mobile_huoke_page">
      <!--banner-->
      <div class="mobile_product_banner mobile_huoke_baner_bg">
        <div class="col_fff border_0">
            <p class="mobile_banner_title">获客宝</p>
            <p class="mobile_banner_sm_title">让门店获客如此简单</p>
            <button type="button" class="bg_2577EF col_fff mobile_banner_btn" @click="mobile_shearch_agent">立即开通</button>
          </div>
      </div>

      <!--banner下方内容-->
      <div class="mobile_huoke_wei"><img src="http://image.xuemei99.com/fouction_pic_huokebao.png" alt=""></div>

      <!--微商城-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">微商城</p>
          <p class="col_666 font_14 margin_top_10">专业为您的门店在线上打造的空中商城。</p>
        </div>
        <img src="http://image.xuemei99.com/vmall_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--营销插件-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">营销插件</p>
          <p class="col_666 font_14 margin_top_10">定期推出新的营销插件帮助企业轻松获客，自主获客。</p>
        </div>
        <img src="http://image.xuemei99.com/yingxiao_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--管理系统-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">管理系统</p>
          <p class="col_666 font_14 margin_top_10">订单管理，顾客管理，项目管理，活动管理，员工管理，业绩管理，专业的APP后台管理。</p>
        </div>
        <img src="http://image.xuemei99.com/mobile_manage_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--智能运营-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">智能运营</p>
          <p class="col_666 font_14 margin_top_10">活动数据查询及跟进，活动前、活动中、活动后执行流程智能提醒智能推送，确保活动结果及跟进，帮助企业随时了解活动跟进活动。</p>
        </div>
        <img src="http://image.xuemei99.com/yunying_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--客连客小程序-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop mobile_huoke_ke_item">
        <div class="padding_left_15 padding_right_15 col_fff item_title_box">
          <p class="font_20">生态系统-客连客小程序</p>
          <p class="font_14 margin_top_10">异业联盟生态平台，让联盟门店顾客参与本店营销活动，整合联盟门店优惠方案，让顾客获得更多优惠，联盟商家免费获得客连客小程序推广系统，门店智能联盟，智能互推，智能获客</p>
        </div>
        <img src="http://image.xuemei99.com/shengtai_pic_huokebao.png" alt="" class="margin_top_6" style="width: 90%">
        <router-link to="/kelianke"><button type="button" class="bg_2577EF col_fff font_14 to_kelianke_btn">了解详情</button></router-link>
      </div>

      <!--版本介绍-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">版本介绍</p>
        </div>
        <img src="http://image.xuemei99.com/version_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--体验与下载-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">体验与下载</p>
        </div>
        <img src="http://image.xuemei99.com/download_pic_huokebao.png" alt="" class="margin_top_6">
      </div>

      <!--获客宝开通流程-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop mobile_huoke_open_item">
        <div class="padding_left_15 padding_right_15 col_fff item_title_box">
          <p class="font_20">获客宝开通流程</p>
        </div>
        <img src="http://image.xuemei99.com/open_pic_huokebao.png" alt="" class="margin_top_20">
        <button type="button" class="bg_2577EF col_fff font_14 margin_top_30 to_kelianke_btn" @click="mobile_shearch_agent">立即开通</button>
      </div>
    </div>
    <!--底部-->
    <Foot></Foot>

    <!--移动端咨询弹出框-->
    <mobileAgentModal :mobile-mask="mobile_agent_mask" v-on:succ="succ"></mobileAgentModal>
  </div>
</template>

<script>
  import Foot from '@/components/foot/foot'
  import messageBoard from '@/components/messageBoard/messageBoard'
  import modalAgent from '@/components/modal/modal_agent'
  import mobileAgentModal from '@/components/modal/mobile_agent_modal'

  export default {
    name: 'huoke',
    components: {
      messageBoard,
      modalAgent,
      Foot,
      mobileAgentModal
    },
    methods:{
        //跳转到客连客
        to_kelianke(){
            this.$router.push({path:'/kelianke'})
        },

        /**
         * 移动端
         *点击立即开通
         * 查询加盟商
         * **/
        mobile_shearch_agent(){
          let that = this;
          that.mobile_agent_mask = true;
          $(".mobile_agent_modal").animate({"height": '476px'}, '500', 'swing');
        },

        succ(data){
            this.mobile_agent_mask = false;
            console.log(data);
        }
    },
    data () {
      return {
          mobile_agent_mask:false
      }
    },
    mounted(){

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .banner_huoke{
    position: relative;
  }
  .banner_open_btn{
    position: absolute;
    width: 130px;
    height: 38px;
    top: 63%;
    left: 46%;
    opacity: 0;
    z-index: 999;
  }
  .banner_huoke img{
    width: 100%;
  }
  .wei_shop_ul{
    margin: 0 auto;
    padding: 60px 0px;
  }
  .wei_shop_ul .item_shop{
    margin-left: 87px;
    width: calc(20% - 70px);
    width: -moz-calc(20% - 70px);
    width: -webkit-calc(20% - 70px);
  }
  .shop_box_bg{
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .item_shop_bg1{
    background-image: url("http://image.xuemei99.com/mall_icon_huokebao.png");
  }
  .item_shop_bg2{
    background-image: url("http://image.xuemei99.com/chajian_icon_huokebao.png");
  }
  .item_shop_bg3{
    background-image: url("http://image.xuemei99.com/manage_icon_huokebao.png");
  }
  .item_shop_bg4{
    background-image: url("http://image.xuemei99.com/yunying_icon_huokebao.png");
  }
  .item_shop_bg5{
    background-image: url("http://image.xuemei99.com/kelianke_icon_huokebao.png");
  }
  .item_shop p{
    margin-top: 20px;
    font-size: 18px;
  }
  .wei_shop_ul li:first-child{
    margin-left: 0;
  }
  .item_wei_shop{
    padding: 60px 0;
  }
  .wei_img_ul{
    margin: 32px auto 0 auto;
    padding: 0;
  }
  .wei_img_ul .wei_img_box{
    width: 220px;
    height: 376px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .wei_img_box1{
    background-image: url("http://image.xuemei99.com/yuyue_pic_huokebao.png");
  }
  .wei_img_box2{
    background-image: url("http://image.xuemei99.com/huodong_pic_huokebao.png");
  }
  .wei_img_box3{
    background-image: url("http://image.xuemei99.com/mall_pic_huokebao.png");
  }
  .components_ul{
    margin: 40px auto;
  }
  .components_left_img{
    width: 220px;
    height: 527px;
    background: url("http://image.xuemei99.com/chajian_pic_huokebao.png") no-repeat center;
    background-size: cover;
  }
  .components_right_box{
    padding-top: 52px;
    margin-left: 60px;
    width: calc(100% - 280px);
    width: -moz-calc(100% - 280px);
    width: -webkit-calc(100% - 280px);
  }
  .right_img_box{
    margin-top: 58px;
    padding-left: 0;
    padding-right: 0;
  }
  .right_img_box img{
    width: 80px;
    height: 80px;
  }
  .right_img_box p{
    margin-top: 22px;
  }

  .manage_left_box{
    padding-top: 52px;
    width: calc(100% - 280px);
    width: -moz-calc(100% - 280px);
    width: -webkit-calc(100% - 280px);
  }
  .manage_right_box{
    width: 220px;
    height: 527px;
    margin-left: 60px;
    background: url("http://image.xuemei99.com/manage_pic_huokebao.png") no-repeat center;
    background-size: cover;
  }
  .operate_box{
    width: 720px;
    height: 376px;
    background: url("http://image.xuemei99.com/yunying_pic_huokebao.png") no-repeat center;
    background-size: cover;
    margin-top: 32px;
  }

  .item_ecology_box{
    background: url("http://image.xuemei99.com/shengtai_bg_huokebao.jpg") no-repeat center;
    background-size: cover;
  }
  .ecology_left img{
    width: 100%;
  }
  .ecology_right{
    margin-top: 12%;
  }
  .ecology_detail_btn{
    width: 116px;
    height: 36px;
    line-height: 36px;
    margin-top: 20px;
  }
  .edition_ul{
    width: 736px;
  }
  .edition_ul li{
    width: 220px;
    height: 230px;
    margin-left: 38px;
  }
  .edition_ul li:first-child{
    margin-left: 0;
  }
   .edition_ul li img{
     width: 100%;
     height: 100%;
   }
  .download_ul{
    width: 500px;
    margin: 40px auto 0 auto;
  }
  .download_ul li{
    width: 200px;
    margin-left: 100px;
  }
  .download_ul li:first-child{
    margin-left: 0;
  }
  .download_ul li img{
    width: 100%;
    height: 200px;
    margin-bottom: 16px;
  }

  .join_flow{
    background: url("http://image.xuemei99.com/process_bg_jiameng.jpg") no-repeat center;
    background-size: cover;
    padding: 80px 0;
  }
  .flow_box{
    padding-left: 20px;
    padding-right: 20px;
  }
  .flow_img_box,.flow_right_icon{
    float: left;
  }
  .flow_img_box{
    width: 120px;
  }
  .flow_img_box img{
    width: 120px;
    height: 120px;
  }
  .flow_img_box p{
    margin-top: 20px;
    font-size: 18px;
  }
  .flow_right_icon{
    width: calc(33.333% - 160px);
    width: -moz-calc(33.333% - 160px);
    width: -webkit-calc(33.333% - 160px);
    height: 120px;
    background: url("http://image.xuemei99.com/next_icon_jiameng.png") no-repeat center;
    background-size: 1em;
  }
  .join_daili_btn{
    width: 200px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  }
  .mobile_huoke_baner_bg{
    background-image: url("http://image.xuemei99.com/mobile_banner_pic_huokebao.jpg");
  }
  .mobile_huoke_wei img{
    width: 100%;
  }


  .mobile_huoke_ke_item{
    background-image: url("http://image.xuemei99.com/shengtai_bg_huokebao.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
  }

</style>
